<template>
  <page-header-wrapper>
    <a-card>
      <a-form-model>
        <p class="flex">
          <a-input class="mr-2" placeholder="请输入项目地址、客户名称、贷款顾问" style="width:30%" v-model="keyWord" />
          <a-button class="mx-4" type="primary" @click="search">查询</a-button>
          <a-button class="mr-2" @click="reset">重置</a-button>
          <ListExport :form="form" :columns="columns" :keyWord="keyWord" />
        </p>

        <p class="flex">
          提款时间：
          <a-button
            v-for="(list, index) in leftPart"
            :key="index"
            class="mr-2"
            @click="durationChange(index)"
            :class="{ liBackground: changeLeftBackground == index }"
            >{{ list.name }}</a-button
          >
          <a-range-picker @change="Onchange" v-model="dateRange" />
        </p>
        <div class="flex">
          <a-form-model-item label="货币：" prop="currency" class="flex">
            <a-select v-model="form.currency" class="length mr-8">
              <a-select-option value="全部">
                全部
              </a-select-option>
              <a-select-option value="NZD">
                NZD
              </a-select-option>
              <a-select-option value="CAD">
                CAD
              </a-select-option>
            </a-select>
          </a-form-model-item>
          <a-form-model-item label="金额：" prop="startAmount" class="flex">
            <a-input class="mx-4 length" v-model="form.startAmount" />——<a-input
              class="mx-4 length"
              v-model="form.endAmount"
            />
          </a-form-model-item>
        </div>
      </a-form-model>
    </a-card>
    <a-card>
      <p class="float-right">NZD总金额：{{ moneyType(NZD) }} CAD总金额：{{ moneyType(CAD) }}</p>
      <a-table
        rowKey="id"
        :columns="columns"
        :data-source="data"
        class="clear-right"
        :pagination="pagination"
        :scroll="{ x: 1500, y: 400 }"
      >
        <span slot="date" slot-scope="date"> {{ humanizeDate(date) }}</span>
        <span slot="calcDate" slot-scope="calcDate"> {{ humanizeDate(calcDate) }}</span>
        <span slot="remittanceDate" slot-scope="remittanceDate"> {{ humanizeDate(remittanceDate) }}</span>
        <span slot="amount" slot-scope="amount"> {{ moneyType(amount) }}</span>
        <span slot="opr" slot-scope="_, record">
          <Status :record="record" @update="getData" />
        </span>
      </a-table>
    </a-card>
  </page-header-wrapper>
</template>
<script>
import moment from 'moment'
import { getWithdraw } from '@/api/common'
export default {
  name: 'withdrawList',
  data() {
    return {
      leftPart: [{ name: '近一周' }, { name: '近一个月' }, { name: '近三月' }, { name: '近一年' }],
      changeLeftBackground: 0,
      dateRange: [null, null],
      keyWord: '',
      NZD: 0,
      CAD: 0,
      form: {
        startTime: '',
        endTime: '',
        currency: '全部',
        startAmount: '',
        endAmount: ''
      },
      columns: [
        {
          title: '编号',
          dataIndex: 'projectNum',
          key: 'projectNum',
          width: 130,
          fixed: 'left'
        },
        {
          title: '项目地址',
          dataIndex: 'addr',
          key: 'addr',
          width: 110,
          fixed: 'left'
        },
        {
          title: '客户',
          dataIndex: 'clientName',
          key: 'clientName'
        },
        {
          title: '阶段',
          dataIndex: 'stage',
          key: 'stage'
        },
        {
          title: '律师',
          dataIndex: 'lawyerName',
          key: 'lawyerName'
        },
        {
          title: '货币',
          dataIndex: 'currency',
          key: 'currency'
        },
        {
          title: '提款日期',
          dataIndex: 'date',
          key: 'date',
          scopedSlots: { customRender: 'date' }
        },
        {
          title: '计算日期',
          dataIndex: 'calcDate',
          key: 'calcDate',
          scopedSlots: { customRender: 'calcDate' }
        },
        {
          title: '金额',
          dataIndex: 'amount',
          key: 'amount',
          scopedSlots: { customRender: 'amount' }
        },
        {
          title: '银行',
          dataIndex: 'bank',
          key: 'bank'
        },
        {
          title: '汇款日期',
          dataIndex: 'remittanceDate',
          key: 'remittanceDate',
          scopedSlots: { customRender: 'remittanceDate' }
        },
        {
          title: '操作',
          dataIndex: 'opr',
          key: 'opr',
          scopedSlots: { customRender: 'opr' },
          fixed: 'right'
        }
      ],
      data: [],
      pagination: {
        total: 1,
        pageSize: 10,
        onChange: this.getData
      }
    }
  },
  components: {
    ListExport: () => import('./com/withdrawlistExport.vue'),
    Status: () => import('./com/withdrawStatus.vue')
  },
  mounted() {
    this.getData()
    this.changeLeftBackground = -1
  },
  methods: {
    search() {
      this.getData()
    },
    reset() {
      this.keyWord = ''
      this.form.currency = '全部'
      this.form.startAmount = ''
      this.form.endAmount = ''
      this.changeLeftBackground = -1
      this.dateRange = [null, null]
      this.getData()
    },
    durationChange(index) {
      this.changeLeftBackground = index
      if (index == 0) {
        this.dateRange = [moment(Date.now()).subtract(7, 'days'), moment(Date.now(), 'x')]
      }
      if (index == 1) {
        this.dateRange = [moment(Date.now()).subtract(1, 'months'), moment(Date.now(), 'x')]
      }
      if (index == 2) {
        this.dateRange = [moment(Date.now()).subtract(3, 'months'), moment(Date.now(), 'x')]
      }
      if (index == 3) {
        this.dateRange = [moment(Date.now()).subtract(1, 'years'), moment(Date.now(), 'x')]
      }
      this.getData()
    },
    Onchange(value) {
      this.changeLeftBackground = -1
    },
    humanizeDate(v) {
      if (v) {
        return moment(v * 1000).format('YYYY-MM-DD') || '--'
      } else {
        return '-'
      }
    },
    moneyType(v) {
      return `${v}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
    async getData(page = 1) {
      this.data = []
      const _form = Object.assign(
        {
          page,
          limit: this.pagination.pageSize,
          statusHandle: 1
        },
        this.form
      )
      if (this.dateRange[0]) {
        _form.startTime = Number(this.dateRange[0].startOf('day').format('X'))
        _form.endTime = Number(this.dateRange[1].startOf('day').format('X'))
      }
      if (this.keyWord) {
        _form.keyWord = this.keyWord
      }
      if (this.form.currency != '全部') {
        _form.currency = this.form.currency
      }
      if (this.form.startAmount) {
        _form.startAmount = this.form.startAmount
      }
      if (this.form.endAmount) {
        _form.endAmount = this.form.endAmount
      }
      for (let k in _form) {
        if (!_form[k]) {
          delete _form[k]
        }
      }
      if (this.form.currency == '全部') {
        delete _form.currency
      }
      // console.log(_form)
      var res = await getWithdraw(_form)
      const data = res.result.data
      this.pagination.total = data.total
      this.NZD = data.NZD ? data.NZD : 0
      this.CAD = data.CAD ? data.CAD : 0
      const _data = []
      this.data = data.list.map((el, i) => {
        // el.remittanceDate = moment(el.remittanceDate, 'X')
        el.index = i
        return el
      })
    }
  }
}
</script>
<style lang="css" scoped>
.left {
  margin-left: 30px;
}
.length {
  width: 150px;
}
.aa {
  border: none;
  border-radius: 5px;
  color: black;
}
.liBackground {
  background: #1890ff;
  color: white;
}
</style>
